<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <i class="el-icon-search btn-search" @click="handleShowSearch()"></i>

      <div class="btn-box">
        <a
          class="el-button el-button--success el-button--medium"
          href="http://123.57.59.222:8081/api/file/course_supplier_template.xlsx"
          type="primary"
          >模版下载</a
        >
        <el-upload
         
            :action="UploadUrl()"
             :show-file-list="false"
            
            :on-success="handleImageSuccess"
          class="upload_image"
        >
          <el-button type="primary" v-show='roleName=="admin"'>导入</el-button>
        </el-upload>
        <el-button
          type="primary"
          icon="el-icon-document"
          :disabled="list.length <= 0"
          @click="dowloadExcel"
          >导出excel</el-button
        >
      </div>
      <div v-show="showbtns == true" class="search-lf">
        <el-form-item label="PO单号">
          <el-input v-model="listQuery.po" placeholder="po单号"></el-input>
        </el-form-item>
        
        <el-form-item class="regin_search" label="战区">
          <!-- <el-input v-model="listQuery.regionName" placeholder="战区"></el-input> -->
          <el-select
            filterable
            v-model="listQuery.regionName"
           
            clearable
            @change="handleChangePro4($event)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in regiosList"
              :key="item.id"
              :label="item.region"
              :value="item.region"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省份">
          <el-select
            filterable
            v-model="listQuery.provinceName"
           
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in allProvinceList"
              :key="item.provinceId"
              :label="item.province"
              :value="item.province"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="regin_search" label="课程编导">
          <el-select
            filterable
            clearable
            v-model="listQuery.courseChargeName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in courseChargeList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input
            v-model="listQuery.courseName"
            placeholder="课程名称"
          ></el-input>
        </el-form-item>
        
        <el-form-item class="btn-search-li">
          <el-button type="primary" plain @click="getList()">查询</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table
      v-loading="listLoading"
      border
      height="650px"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width="60px" label="序号">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="130px" label="PO单号">
        <template slot-scope="{ row }">
          <span>{{ row.po }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程名称">
        <template slot-scope="{ row }">
          <span>{{ row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程编导">
        <template slot-scope="{ row }">
          <span>{{ row.courseChargeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程ID">
        <template slot-scope="{ row }">
          <span>{{ row.courseId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="供应商类型">
        <template slot-scope="{ row }">
          <span>{{ row.supplierTypeName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="200px" label="供应商名称">
        <template slot-scope="{ row }">
          <span>{{ row.supplierName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="服务类型">
        <template slot-scope="{ row }">
          <span>{{ row.serviceTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="服务名称">
        <template slot-scope="{ row }">
          <span>{{ row.serviceName }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="100px" label="更新日期">
        <template slot-scope="{ row }">
          <span>{{ row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="预估结算日期"
      >
        <template slot-scope="{ row }">
          <span>{{ row.estimatedSettlementDate }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="单价">
        <template slot-scope="{ row }">
          <span>{{ row.unitPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="数量">
        <template slot-scope="{ row }">
          <span>{{ row.quantity }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="预估成本">
        <template slot-scope="{ row }">
          <span>{{ row.estimatedGenerationCost }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="已支付">
        <template slot-scope="{ row }">
          <span>{{ row.supplierPaidAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="未支付">
        <template slot-scope="{ row }">
          <span>{{ row.supplierUnpaidAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="160px" label="供应商评级">
        <template slot-scope="{ row }">
          <el-rate
            v-model="row.finalEvaluation"
            show-score
            disabled
            text-color="#ff9900"
            score-template="{value}"
          ></el-rate>
          <!-- <span>{{ row.finalEvaluation }}</span> -->
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="200px" label="说明">
        <template slot-scope="{ row }">
          <span>{{ row.supplierPaidAmount }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total >= 20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  poCourseSupplierList,
  addPoCourseSupplier,
  updatePoCourseSupplier,
  delPoCourseSupplier,
  contractPO,
  getProvinces,
  poSettlement,
} from "@/api/supplier";
import { RegionsProvince } from "@/api/region";
import { regiosList } from "@/api/user";
import {
  getSupplierContent,
  getCourseCharge,
  baseUrl2,
  getSupplierType,
} from "@/api/remote-search";
import {exportCourseSupplier} from '@/api/exportExcel'
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  name: "corsesList",
  components: { Pagination },
  filters: {
    statusColorFilter(status) {
      const statusMap = {
        1: "success",
        2: "danger",
        3: "warning",
        4: "info",
        5: " ",
      };
      return statusMap[status];
    },
    statusFilter(status) {
      const statusMap = {
        1: "进行中",
        2: "已完成",
        3: "已过期",
        0: "新合同",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      uploadUrl:'',
      showbtns: false,
      list: [],
      roleName:sessionStorage.getItem('memberName'),
      editDisabled: false,
      provinceList: [], //战区下面省份
      allProvinceList:[],//所有省份
      regiosList: [], //战区
      downloadLoading: false,
      courseList: [], //课程编导list
      courseChargeList: [], //课程编导
      SupplierType: [], //供应商类型
      courseTypeList: [], //课程类别
      shootModeList: [], //拍摄形式
      CourseSchedule: [], //课程进度
      CourseLineState: [], //课程上线状态
      subjectTypeList: [], //学科门类
      onlineList: [], //上线情况
      majorList: [], //专业分类
      multipleSelection: "", //多选
      isSure: true,
      rowEdit: false,
      newPoId: "", //新增之后返回的id
      downloadLoading: false,
      supplierContentList: [], //课程编导集合
      productLineList: [], //课程ID集合
      contracTypeList: [], //合同类型
      provinceList: [], //战区省份
      allProvinceList:[],//所有省份
      regiosList: [], // 讲师姓名
      corsesList: {
        // contractDeliveryDate: "",
        isTrailer: "0",
      },
      total: 0,
      dialogVisibleMenu: false,
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem("token"),
        page: 1,
        customerName: "",
        regionName: "",
        provinceName: "",
        pageSize: 20,
      },

      poId: "", //POid
      rolesList: [],

      dialogVisible: false,
      dialogType: "new",
      checkStrictly: false,

      ids: "",
      idsPo: "",
    };
  },
  created() {
    this.getList();
    this.getListes();
  },
  computed: {},

  methods: {
      UploadUrl(){
      return baseUrl2+'/api/file/import_course_supplier'
    },
    handleClose() {
      this.editDisabled = false;
    },
    handleImageSuccess(file) {
      if (file.code == 200) {
        this.$message.success(file.message);
        this.getList();
      } else {
        this.$message.error(file.message);
      }
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
    dowloadExcel() {
      exportCourseSupplier(this.listQuery);
      // window.location.href =
      //   baseUrl2 +
      //   "/api/file/export_course_supplier?customerName=" +
      //   this.listQuery.customerName +
      //   "&provinceName=" +
      //   this.listQuery.provinceName +
      //   "&regionName=" +
      //   this.listQuery.regionName +
      //   "&courseChargeName" +
      //   this.listQuery.courseChargeName +
      //   "&supplierName" +
      //   this.listQuery.supplierName;
    },
    handleChangePro4(id) {
      let obj = {};
      obj = this.regiosList.find((item) => {
        return item.region === id;
      });
      this.contractList.regionId = obj.id;
      RegionsProvince(obj.id).then((res) => {
        this.provinceList = res.data.data;
      });
    },
    handleCouseChangeName(id) {
      let obj = {};
      obj = this.courseChargeList.find((item) => {
        return item.name === id;
      });
      this.corsesList.courseChargeId = obj.id;
       
    },
    handleSupplierType(id) {
      let obj = {};
      obj = this.SupplierType.find((item) => {
        return item.name === id;
      });
      this.corsesList.supplierTypeId = obj.id;
       
    },
    handleExport() {
      if (this.multipleSelection.length <= 0) {
        this.$message.error("请选择你要更新的数据");
        return false;
      }
      let data = {
        ids: this.idsPo,
      };
      poSettlement(data).then((res) => {
        if (res.data.code == "200") {
          this.$message.success(res.data.message + "请到供应商结算总单查看");
          this.getList();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    getListes() {
        getProvinces().then((res) => {
        this.allProvinceList = res.data.data;
      });
      regiosList().then((res) => {
        this.regiosList = res.data.data;
      });
      getSupplierContent().then((res) => {
        this.supplierContentList = res.data.data;
      });
      getCourseCharge().then((res) => {
        this.courseChargeList = res.data.data;
      });
      getSupplierType().then((res) => {
        this.SupplierType = res.data.data;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      
      let res = [];
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((r) => {
          res.push(r.id);
        });
        this.idsPo = res.join(",");
        
      }
    },
    handleChangePro7(id) {
      let obj = {};
      obj = this.supplierContentList.find((item) => {
        return item.name === id;
      });
      this.corsesList.serviceTypeId = obj.id;
       
    },

    handleChangePro8(id) {
      let obj = {};
      obj = this.CourseSchedule.find((item) => {
       
        return item.name === id;
      });
      this.corsesList.courseScheduleId = obj.id;
    },

    getList() {
      this.editDisabled = false;
      this.listLoading = true;
      poCourseSupplierList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
  },
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
